<template>
	<cover-view class="right-window">
		<cover-view class="r-box">
			<cover-view class="r-item" v-for="(item, index) in rLists" :key="index" @click="onRightMethods(item.name)">
				<cover-image :src="item.src" mode="aspectFill" :style="{'width': item.width,'height': item.height}"></cover-image>
				<cover-view v-if="index == 2">图例</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	export default{
		data() {
			return {
				rLists: [
					{width: '43rpx', height: '43rpx', src: require('../../static/icon10.png'), name: 'my'},
					{width: '48rpx', height: '37rpx', src: require('../../static/icon9.png'), name: 'car'},
					{width: '28rpx', height: '28rpx', src: require('../../static/icon11.png'), name: 'icon'}
				]
			}
		},
		methods: {
			onRightMethods(str) {
				this.$emit('onRightMethods', str)
			}
		}
	}
</script>

<style scoped>
	.r-box{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.r-item{
		width: 68rpx;
		height: 68rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 7rpx 0px rgba(160, 153, 153, 0.35);
		border-radius: 8rpx;
		margin-bottom: 14rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #3791E9;
		font-size: 22rpx;
	}
</style>
